<template>
    <div class="secondary-comment-list">
        <SECONDARY
            v-for="reply in SecondaryComments"
            :key="reply.id"
            :comment="reply"
            :user="user"
            v-model:showmore="show_more"
            @update-newcomment="addComment"
        />
        <div id="target-element"></div>
    </div>
</template>

<script setup>
import { ref,onMounted,nextTick, inject,defineExpose} from 'vue'
import SECONDARY from './secondaryItem.vue'
import { get_text_comments_second} from "@/api/community/main.js"
let islodaing = ref(false)
const  user = inject('user')()
const community = inject('community')()

// 示例数据
const SecondaryComments = ref([
    // {
    //     id: 1,
    //     author: 77777777,
    //     date: '2025-04-08 21:34:42',
    //     f_author: 88888888,
    //     images: null,
    //     content: '这是一个二级测试的回复。',
    //     like_count: 2,
    //     username:"zhangsan",
    //     author_image: 'https://via.placeholder.com/50'
    // },
    // {
    //     id: 2,
    //     author: 66666666,
    //     date: '2025-04-08 21:40:00',
    //     f_author: 99999999,
    //     images: ['https://via.placeholder.com/150'],
    //     content: '二级评论回复内容示例。',
    //     username:"zhangsan",
    //     like_count: 1,
    //     author_image: 'https://via.placeholder.com/50'
    // }
])
const addComment= (data)=>{
    SecondaryComments.value.unshift(data)
}
defineExpose({
    addComment: addComment
})
const init_brower =() => {
    const target = document.querySelector('#target-element');
    if (!target) return;
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                if(islodaing)return
                islodaing.value = true
                // 由于这个观察是同步函数所以多用一个函数用来处理异步加载的数据
                // 可以在这里停止观察
                loadmorecomments()
            }
        });
    }, {
        root: document.querySelector('.secondary-comment-list'), // 相对盒子
        rootMargin: '0px', // 无额外边距
        threshold: 0.1 // 当10%的元素可见时触发
    });

    observer.observe(target); // 正确的观察位置
}

const loadmorecomments = async () => {
    article_id, f_author, userid,f_uuid, limit
    const middledata = getUniqueItemsFromSecondArray_byId(
        SecondaryComments.value, await get_text_comments_second(
            props.article_id,
            props.fauthor_id, user.value.get_user().id,
            props.fcomment_uuid,
            customDivision(SecondaryComments.value.length, 10)),
        'uuid')
    SecondaryComments.value.push(...middledata)
    
}

const props = defineProps({
    fauthor_id: {
        type: Number,
        required: true
    },
    article_id: {
        type: Number,
        required: true
    
    },
    fcomment_uuid: {
        type: String,
        required: true
    }
})
onMounted(async() => {
    await nextTick()
    init_brower()
    const data=await get_text_comments_second(props.article_id,props.fauthor_id,user.value.get_user().id,props.fcomment_uuid)
    SecondaryComments.value = data
    community.value.set_curent_article_expand_info('SecondaryComments', SecondaryComments.value)
    
})



</script>

<style scoped>
.secondary-comment-list {
    margin-top: 10px;
    padding-left: 20px;
    border-left: 2px solid #ddd;
}
#target-element{
    height: 20px;
}
</style>